<template>
	<view class="y-flex pt-30 pb-30 pl-30 pr-30">
		<view class="y-flex y-row y-align-center border-bottom-1 border-bottom-style-dashed pb-20" :style="{'border-bottom-color': skinColor.color_gap_1}">
			<text class="fs-35 y-flex-1 fw-bold" :style="{color: skinColor.color_1}">{{title}}</text>
			<view class="y-flex y-row y-align-center" @tap="moreClick">
				<text class="fs-28" :style="{color: skinColor.color_3}">共{{data.length}}{{unit}}</text>
				<com-icon name="right" size="32" :color="skinColor.color_3"></com-icon>
			</view>
		</view>
		<view class="y-flex">
			<view class="y-flex y-row y-align-center mt-30" v-for="(item, index) in list" :key="index" @tap="itemClick(index)">
				<text class="fs-34 lines-1 y-flex-1 mr-10" :style="{color: skinColor.color_2}">{{item.title || '第' + (index + 1) + unit}}</text>
				<com-icon name="right" size="30" :color="skinColor.color_2"></com-icon>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		inject: ['getSkinColor'],
		props: {
			data: {
				type: Array,
				default: () => []
			},
			options: {
				type: Object,
				default: () => ({})
			}
		},
		computed: {
			skinColor () {
				return this.getSkinColor()
			},
			maxCount () {
				return this.options.maxCount || 5
			},
			title () {
				return this.options.title || ''
			},
			unit () {
				return this.options.unit || ''
			},
			list () {
				return this.data.slice(0, Math.min(this.maxCount, this.data.length))
			}
		},
		methods: {
			itemClick (index) {
				this.$emit('itemClick', {index, detail: this.data[index]})
			},
			moreClick () {
				this.$emit('moreClick')
			}
		}
	}
</script>

<style>
</style>